<template>
  <div class="guidance">
    <van-nav-bar class="navBar" title="知青务农" left-text="" left-arrow @click-left="back" />
    <div class="header" />
    <div class="content">
      <img class="icon" src="https://jwc-static.jdwxk.com/imgs/activities/guidance_icon.png" alt="">
      <div class="title">
        {{ title }}
      </div>

      <div class="crops">
        <div v-for="(crop, index) in state.crops" :key="index" class="crop">
          <!-- <div class="img" /> -->
          <img class="img" :src="crop.img" alt="">
          <div class="text_shell">
            <div class="text">
              {{ crop.text }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

import { useRouter } from 'vue-router'

// const cardBaseUrl = ref(import.meta.env.VITE_GLOB_IMG_URL)

const router = useRouter()
function back() {
  router.go(-1)
}

const title = ref('前往知青广场 AR 互动大屏参与务农小游戏，猜猜你能种出什么农产品')
const state = ref({
  crops: [
    { text: '包菜', img: 'https://jwc-static.jdwxk.com/imgs/activities/farm_products/1.png' },
    { text: '胡萝卜', img: 'https://jwc-static.jdwxk.com/imgs/activities/farm_products/2.png' },
    { text: '花生', img: 'https://jwc-static.jdwxk.com/imgs/activities/farm_products/3.png' },
    { text: '麦穗', img: 'https://jwc-static.jdwxk.com/imgs/activities/farm_products/4.png' },
    { text: '南瓜', img: 'https://jwc-static.jdwxk.com/imgs/activities/farm_products/5.png' },
    { text: '土豆', img: 'https://jwc-static.jdwxk.com/imgs/activities/farm_products/6.png' },
    { text: '西红柿', img: 'https://jwc-static.jdwxk.com/imgs/activities/farm_products/7.png' },
    { text: '玉米', img: 'https://jwc-static.jdwxk.com/imgs/activities/farm_products/8.png' },
    { text: '圆白菜', img: 'https://jwc-static.jdwxk.com/imgs/activities/farm_products/9.png' },
    { text: '紫薯', img: 'https://jwc-static.jdwxk.com/imgs/activities/farm_products/10.png' },
  ],
})
</script>

<style lang="scss" scoped>
.guidance {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  // padding-bottom: 30px;
  box-sizing: border-box;
  background-color: #f1ece0;

  .navBar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
  }

  .header {
    background: url('https://jwc-static.jdwxk.com/imgs/activities/guidance_bg.png');
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    height: 320px;
  }

  .content {
    width: 100%;
    height: calc(100vh - 320px + 30px);
    margin-top: -50px;
    background-color: #f1ece0;
    border-radius: 20px 20px 0 0;
    position: relative;
    padding-top: 45px;
  }
  .icon {
    width: 152.5px;
    height: 140px;
    position: absolute;
    left: -11.5px;
    top: -16.5px;
  }
  .title {
    color: #a95644;
    width: 240px;
    height: 50px;
    box-sizing: content-box;
    margin-left: 108px;
    padding-bottom: 23.5px;
    border-bottom: 1px dashed #a95644;
    margin: 0 31px 30px 108px;
    font-size: 15px;
    line-height: 25px;
  }

  .crops {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 23.5px;
    column-gap: 14px;
    row-gap: 25px;
    padding-bottom: 40px;
  }
  .crop {
    width: 100px;
    .img {
      border: 2.5px solid #d1af7d;
      border-radius: 6px;
      background-color: white;
      width: 100px;
      height: 75px;
      // img{
      //   width: 100px;
      //   height: 75px;
      // }
    }
    .text_shell {
      margin-left: 50%;
      transform: translate(-50%, -10px);
      position: relative;
      width: 85px;
      height: 21px;
      // padding: 1px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #d1af7d;
      clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
    }
    .text {
      position: relative;
      width: 83px;
      height: 19px;
      background-color: white;
      clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
      text-align: center;
      line-height: 19px;
      color: #a95644;
      font-size: 12px;
    }
  }
}
</style>
